<template>
    <el-main>
        <el-button size="mini" @click="dialogFormVisible = true; title = '新增壁纸'">新增壁纸</el-button>
        <el-table :data="tableData" style="width: 100%;margin:10px 0">
            <el-table-column label="展示" width="450">
                <template #default="scope">
                    <!-- <img style="width: 30px;" :src="scope.row.url" alt=""> -->
                    <el-image style="width: 30px;height: 30px" :src="scope.row.url" :zoom-rate="1.2" :max-scale="7"
                        :min-scale="0.2" :preview-src-list="[scope.row.url]" :initial-index="0" :append-to-body="true"
                        :preview-teleported="true" fit="cover" />
                </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" width="450">
            </el-table-column>
            <el-table-column prop="type" label="分类" width="180">
            </el-table-column>
            <el-table-column prop="size" label="图片大小">
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间">
            </el-table-column>
            <el-table-column prop="update_time" label="修改时间">
            </el-table-column>
            <el-table-column label="操作" fixed="right">
                <template #default="scope">
                    <el-button size="mini">Edit-{{ scope.$index }}</el-button>
                    <el-button size="mini" type="danger">Delete</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="dialogFormVisible" :title="title">
            <el-form :model="form" class="form">
                <el-form-item label="图片名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off" class="w200" placeholder="名称" />
                </el-form-item>
                <el-form-item label="风格类型" :label-width="formLabelWidth">
                    <el-select v-model="form.type" placeholder="选择类型">
                        <el-option v-for="(it, idx) in typeClassify" :key="idx" :label="it" :value="typeClassify[idx]" />
                    </el-select>
                </el-form-item>
                <el-form-item label="上传图片" :label-width="formLabelWidth">
                    <el-upload action="/api/upload" ref="pic" limit="1" :on-success="onSuccess" list-type="picture-card"
                        :auto-upload="true">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        <template #file="{ file }">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                        <el-icon><zoom-in /></el-icon>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                        @click="handleDownload(file)">
                                        <el-icon>
                                            <Download />
                                        </el-icon>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                    </span>
                                </span>
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="作品描述" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.remark" autocomplete="off" placeholder="灵感来自..." />
                </el-form-item>
            </el-form>
            <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%;" />
            </el-dialog>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="submit">
                        submit
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </el-main>
</template>
  
<script>
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
export default {
    data() {
        return {
            typeClassify: {
                0: '霸气', 1: '纯色', 2: '古风', 3: '清楚', 4: '励志', 5: '个性', 6: '卡通版', 7: '风景', 8: '清新', 9: '简约', 10: '可爱', 11: '小清新', 12: '其他'
            },
            tableData: [],
            title: '新建壁纸',
            dialogFormVisible: false,
            dialogImageUrl: "",
            dialogVisible: false,
            disabled: false,
            form: {
                name: '',
                filename: '',
                type: 1,
                url: '',
                size: '',
                remark: '',
            },
        }
    },
    components: {
        Delete, Download, Plus, ZoomIn,
    },
    methods: {
        onSuccess(res) {
            // destination:"D:\\www\\xzxm\\public\\download\\pic"
            // encoding:"7bit"
            // fieldname:"file"
            // filename:"banner_bg-1706322196871-07ac6970-bcbb-11ee-b6b0-7981808e3819.jpg"
            // mimetype:"image/jpeg"
            // originalname:"banner_bg.jpg"
            // path:"D:\\www\\xzxm\\public\\download\\pic\\banner_bg-1706322196871-07ac6970-bcbb-11ee-b6b0-7981808e3819.jpg"
            // size:521046
            // console.log(res.data.filename);
            this.form.url = res.data.filename;
            this.form.size = res.data.size;
        },
        handleRemove: function (file) {
            console.log(file);
        },
        handlePictureCardPreview: function (file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },
        clearForm(){
            this.form = {
                name: '',
                filename: '',
                type: 1,
                url: '',
                size: '',
                remark: '',
            }
        },
        handleDownload(file) {
            console.log(file);
        },
        async submit() {
            let res = await this.$API.demo.createpic.post({
                ...this.form
            })
            console.log(res,'==========res');
            if (res.code == 200) {
                this.$message.success("创建成功")
            } else {
                this.$alert(res.message, "提示", { type: 'error' })
            }
            this.$refs.pic.clearFiles();
            this.clearForm()
            this.dialogFormVisible = false
        }
    },
    async mounted() {
        console.log(this.$API);
        let res = await this.$API.demo.getpic.get({})
        this.tableData = res.data
        console.log(res);
    }
}
</script>

<style lang="scss" scoped>
.w200 {
    width: 200px;
}

.form,
.picture-list {
    width: 80%;
    display: inline-block;
}
</style>>